<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="10">
        <a-radio-group :value="barType" @change="statisticst">
          <a-radio-button value="1">按年统计</a-radio-button>
          <a-radio-button value="2">按季度统计</a-radio-button>
          <a-radio-button value="3">按月统计</a-radio-button>
        </a-radio-group>
      </a-col>
      <a-col :span="14">
        <a-form layout="inline" style="margin-top: -4px">
          <a-form-item label="年份" v-if="barType == 1">
            <a-date-picker
              mode="year"
              placeholder="请选择年份"
              format="YYYY"
              v-model="yearQuarter"
              style="width: 100%"
              :open="yearShowOne"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"
            />
          </a-form-item>
          <a-form-item label="季度" v-if="barType == 2">
            <a-select style="width: 120px" @change="handleChange">
              <a-select-option value="1"> 第一季度 </a-select-option>
              <a-select-option value="2"> 第二季度 </a-select-option>
              <a-select-option value="3"> 第三季度 </a-select-option>
              <a-select-option value="4"> 第四季度 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="月份" v-if="barType == 3">
            <a-date-picker
              mode="month"
              placeholder="请选择月份"
              format="YYYY-MM"
              v-model="yearQuarter"
              style="width: 100%"
              :open="yearShowOne"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"
            />
          </a-form-item>
        </a-form>
      </a-col>
      <bar class="statistic" title="超时统计" :dataSource="countSource" :height="400" />
    </a-row>
  </a-card>
</template>
  
  <script>
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import ACol from 'ant-design-vue/es/grid/Col'
import { getAction } from '@/api/manage'
import { get } from 'lodash'

export default {
  name: 'ArchivesStatisticst',
  components: {
    ACol,
    Bar,
    Pie,
  },
  data() {
    return {
      yearShowOne: false,
      description: '档案统计页面',
      // 查询条件
      queryParam: {},
      yearQuarter: '',
      // 数据集
      countSource: [],
      // 柱状图
      barType: '1',
      barDate: ['month', 'month'],
      barValue: [],
      // 饼状图
      pieType: 'year',
      pieDate: ['month', 'month'],
      pieValue: [],
      // 统计图类型
      tabStatus: 'bar',
      url: {
        getYearCountInfo: '/modules/zzzsExamine/getYearTimeoutInfo',
        getQuarterCountInfo: '/modules/zzzsExamine/getQuarteTimeoutInfo',
        getMonthCountInfo: '/modules/zzzsExamine/getMonthTimeoutInfo',
        getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
        getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo',
      },
    }
  },
  created() {
    console.log(this.url.getYearCountInfo)

    this.loadData(this.url.getYearCountInfo)
  },
  methods: {
    handleChange(v) {
      getAction(this.url.getQuarterCountInfo, { quarte: v }).then((res) => {
        if (res.result.length == 0) {
          console.log(res.result)
          this.countSource = []
        }
        for (let i = 0; i < res.result.length; i++) {
          this.countSource.push({ x: res.result[i].user, y: res.result[i].count })
        }
      })
    },
    statisticst(e) {
      console.log(e)
      if (e.target.value == 1) {
        this.barType = '1'
        this.loadData(this.url.getYearCountInfo)
      } else if (e.target.value == 2) {
        this.loadData(this.url.getQuarterCountInfo)
        this.barType = '2'
      } else {
        this.loadData(this.url.getMonthCountInfo)
        this.barType = '3'
      }
    },
    loadData(url, date) {
      console.log(url)
      getAction(url, { year: date }).then((res) => {
        if (res.result.length == 0) {
          console.log(res.result)
          this.countSource = []
        }
        for (let i = 0; i < res.result.length; i++) {
          this.countSource.push({ x: res.result[i].user, y: res.result[i].count })
        }
      })
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },

    // 得到年份选择器的值
    panelChangeOne(value) {
      console.log()
      if (this.barType == '1') {
        this.loadData(this.url.getYearCountInfo, new Date(value))
      } else if (this.barType == '3') {
        this.loadData(this.url.getMonthCountInfo, new Date(value))
      }
      this.yearQuarter = value
      this.yearShowOne = false
    },
    searchReset() {
      this.yearQuarter = ''
    },
  },
}
</script>
  <style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px;
}

.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

.statistic {
  padding: 0px !important;
  margin-top: 50px;
}

.statistic h4 {
  margin-bottom: 20px;
  text-align: center !important;
  font-size: 24px !important;
}

.statistic #canvas_1 {
  width: 100% !important;
}
</style>